<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
  <style media="screen">
    .my-panel {
      width: 80%;
      position: absolute;
      z-index: 100;
      left: 50%;
      top: 100px;
      margin-left: -40%;
      display: none;
    }

    .my-panel-shadow {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: #000;
      opacity: 0.6;
      z-index: 99;
      display: none;
    }

    .my-dialog {
      width: 300px;
      position: absolute;
      z-index: 100;
      left: 50%;
      top: 200px;
      margin-left: -150px;
      display: none;
    }

    .my-dialog-shadow {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background: #000;
      opacity: 0.3;
      z-index: 99;
      display: none;
    }

    .form-group {
      margin-bottom: 5px;


      height: 50px;
    }
  </style>
</head>

<body>
  <ul class="nav nav-tabs">
    <% for(let type in page_types){%>
    <li role="presentation" <%if(type==page_type){%> class="active" <%}%></li> <a href="<%=HTTP_ROOT%>/admin/<%=type%>">
      <%=page_types[type]%></a> </li> <% } %> <!-- <li role="presentation"><a
        href="<%=HTTP_ROOT%>/admin/catalog">页面2</a></li>
    <li role="presentation"><a href="<%=HTTP_ROOT%>/admin/article">页面3</a></li> -->
  </ul>
  <!--表格-->

  <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <% fields.forEach(data=>{ %>
        <th><%=data.title%></th>
        <% }) %>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% datas.forEach(data=>{ %>
      <tr>
        <td><%=data.ID%></td>
        <% fields.forEach(field=>{ %>
        <td><%=data[field.name]%></td>
        <% }) %>
        <td>
          <a href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=data.ID%>"
            class="btn btn-danger glyphicon glyphicon-trash" onclick="return confirm('你是否真的确认要删除')">删除</a>

          <a href="#" data-id="<%=data.ID%>" class="btn btn-default glyphicon glyphicon-pencil btn-modify">修改</a>
        </td>
      </tr>
      <% }) %>
    </tbody>


    <!--添加-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          添加
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="<%=HTTP_ROOT%>/admin/<%=page_type%>" method="post"
          enctype="multipart/form-data">

          <%fields.forEach(field=>{%>
          <div class="form-group">
            <label class="col-sm-2 control-label"><%=field.title%></label>
            <div class="col-sm-10">
              <input type="<%=field.type%>" class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>">
            </div>
          </div>
          <%})%>

          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>


    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>
</body>
<script src="<%=HTTP_ROOT%>/js/jquery.min.js" charset="utf-8"></script>
<script>
  $('#btn_add').click(function () {
    $('.my-panel, .my-panel-shadow').show();
  });

  $('.btn-modify').click(async function () {
    const HTTP_ROOT = '<%=HTTP_ROOT%>'
    let id = this.dataset.id;
    let url = `${HTTP_ROOT}/admin/banner/get/${id}`;

    let data = await $.ajax({
      url,
      dataType: 'json'
    })
    console.log(data);
    if (data.err) {
      alert(data.msg)
    } else {
      let old_data = data.data;

      $('.my-panel, .my-panel-shadow').show();
      $('.my-panel .panel-title').html('修改');
      $('.my-panel form').attr('action', `${HTTP_ROOT}/admin/banner/modify/${id}`);
      // $('.my-panel form').attr('action', `${HTTP_ROOT}/admin/${page_type}/modify/${id}`);
      $('.my-panel input').each(function () {
        console.log(this.name);
        if (old_data[this.name]) {
          try {
            this.value = old_data[this.name]
          } catch (error) {

          }


        }

      })


    }


  })

</script>

</html>